<template>
	<!-- <arco-select v-model="languageType" :options="LANGUAGE_TYPE" size="middle" style="width: 200px" @change="changeLanguage" /> -->
	<div class="login">
		<div class="login-bg">
			<video ref="videoPlayer" :autoplay="shouldAutoplay">
				<source src="@/assets/video.mp4" type="video/mp4">
			</video>
			<!-- <video src="@/assets/video.mp4" autoplay playsinline loop crossorigin="anonymous"></video> -->
		</div>
		<div class="login-form">
			<div class="logo"><img src="@/assets/icon-logo.png" class="logo" /></div>
			<div class="text">便捷、稳定、想象、连接</div>
			<Form />
		</div>
		<component :is="myComponent" ref="myComponentRef"></component>
	</div>
</template>
<script lang="ts" setup>
import Form from './components/Form.vue';
const Drawer = defineAsyncComponent(() => import('./components/Drawer.vue'));
import { useLocaleStore } from "@/store/modules/locale";
import { useLocale } from "@/hooks/useLocale";
import { LANGUAGE_TYPE } from "@/utils/filter";
import { useCache } from "@/hooks/useCache";
import { defineAsyncComponent } from 'vue';
import mitt from "@/utils/bus";
const { wsCache } = useCache();
const localeStore = useLocaleStore();
const languageType = ref(wsCache.get("lang") || "zh-CN");
const { t } = useI18n();
const myComponent = ref(Drawer);
const myComponentRef = ref(null);
onUnmounted(() => {
    mitt.all.clear();
})
// 选择语言
const changeLanguage = (e) => {
	localeStore.setCurrentLocale({ lang: e });
	const { changeLocale } = useLocale();
	changeLocale(e);
};

</script>
<style lang="scss" scoped>
	.login{
		&-bg{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			overflow: hidden;
			height: 100%;
			z-index: 1;
			pointer-events: none;
			video{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		&-form{
			position: absolute;
			top: 50%;
			right: 80px;
			transform: translate(0, -50%);
			background: rgba(0, 0, 0, 0.65);
			border-radius: 5px;
			padding: 30px;
			width: 400px;
			text-align: center;
			z-index: 99;
			&>.logo{
				padding: 10px 0;
				img{
					margin: 0 auto;
					width: 150px;
				}
			}
			.text{
				color: rgba(255, 255, 255, 0.65);
				font-size: 12px;
			}
		}
	}
</style>
